<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="page-view-size" content="1280*720" />
    <link rel="stylesheet" href="style/base.css" />
    <title>熊猫部落-视频播放</title>
    <style>
      html,
      body {
        overflow: hidden;
      }
      body {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 1280px;
        height: 720px;
        background-repeat: no-repeat;
        background-color: transparent;
      }
      #bg-shadow.show {
        display: block;
      }
    </style>
  </head>
  <body onload="init()">
  <!--联通不要 -->
    <div class='smallResolution' id="smallResolution"></div>
	<!--联通不要 -->
    <div id="test"></div>
    <div id="pause"></div>
    <div id="fbwd"></div>
    <div id="ffwd"></div>

    <div id="bg-shadow">
      <div id="tips"></div>
      <div class="title" id="play_title"></div>
      <div class="progress-bar">
        <!-- 播放状态 -->
        <div class="play-flag" id="status"></div>
        <!-- 播放进度条 -->
        <div class="play-progress-bar" id="play-progress-bar"></div>
        <!-- 当前播放时间 -->

        <!-- 视频时长 -->
      </div>
      <div class="currenttime" id="currenttime">00:00:00</div>
      <div class="duration" id="duration">00:00:00</div>
    </div>

    <div id="volume">
      <div class="volume-container">
        <div id="volume-bar"></div>
      </div>
      <img src="images/controls/volum.png" alt="" />
    </div>

    <div id="my-play-list">
      <div id="list-view">
        <div id="panel-container" style="position: relative"></div>
      </div>
    </div>
    
    <script src="js/jquery.js"></script>
    <script src="config/index.js"></script>
    <script src="api/index.js"></script>
    <script src="js/utlis.js"></script>
    <script src="js/KeyEnter.js"></script>
    <script src="js/event.js"></script>
    <script src="js/move.js"></script>
    <script src="js/log.js"></script>
    <script src="js/page.js"></script>

    <script src="components/dialog.js"></script>
    <script src="components/series.js"></script>
    <script src="components/video.js"></script>
    <script src="components/panel.js"></script>
    <script>
      var hanlderEnter = {};

      function getPreFocus() {
        var seriesId = utils.getUrlParam("seriesId", "")
        video.seriesId = seriesId
        // series.getSitcom(elId);
      }

      function init() {
        page.init();
        dialog.init();
        getPreFocus();
        
        // utils.auth((page.data.program && page.data.program.code) || '')
        video.init({
          left: 0,
          top: 0,
          width: 1280,
          height: 720,
          controls: true,
          el: 'body'
        })
        addPlayHistory(page.data.program.ID, page.data.program.name)
        log.commit({
          name: '视频播放页面',
          type1: 'browse',
          type2: 'vod',
          starttime: new Date().getTime(),
        })
      }

      function keyUp() {
        if (panel.visible) {
          var dom = move.up()
          if (dom) {
            panel.index--
            utils.toggleClass(dom)
            panel.conputeScroll()
          }
        }
        panel.show()
      }

      function keyDown() {
        if (panel.visible) {
          var dom = move.down();
          if (dom) {
            panel.index++
            utils.toggleClass(dom)
            panel.conputeScroll()
          }
        }
        panel.show()
      }

      function keyLeft() {
        if (panel.visible) { 
          panel.hide() 
        }
        video.forwardOrRewind(-8)
        video.showControls()
        // var dom = move.left();
        // dom && utils.toggleClass(dom);
      }

      function keyRight() {
        if (panel.visible) {
          panel.hide()
        }
        video.forwardOrRewind(8)
        video.showControls()
        // var dom = move.right();
        // dom && utils.toggleClass(dom);
      }

      function keyEnter() {
        if (dialog.visible) {
          return dialog.hide()
        }
        if (panel.visible) {
          if (video.index == panel.index) {
            panel.show()
          } else {
            video.implementPlay(panel.index)
          }
        } else {
          video.playOrPause()
        }
      }

      function keyMute () {
        video.toggleMute()
      }

      function keyVolumeUp () {
        video.volumeUp()
      }

      function keyVolumeDown () {
        video.volumeDown()
      }

      function keyBack() {
        if (dialog.visible) return dialog.hide()
        if (panel.visible) {
          panel.hide();
        } else {
          try {
            video.destroy()
            video.log()
          } catch (error) {
            
          }
          page.goback();
        }
      }
    </script>
  </body>
</html>
